<template>
  <!--对话框-->
  <a-modal v-model:open="open" title="胃癌风险因素评分" :maskClosable="false">
    <a-table
      size="small"
      bordered
      :columns="state.columns"
      :dataSource="state.tableData"
      :pagination="false"
    >
    </a-table>
    <template #footer></template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const open = ref(false)

const state = reactive({
  columns: [
    {
      title: '参数名称',
      dataIndex: 'label',
      key: 'label',
      customCell: (_, index) => {
        if (index === 0) {
          return { rowSpan: 4 }
        }

        if (index === 4) {
          return { rowSpan: 2 }
        }

        if (index === 6) {
          return { rowSpan: 2 }
        }
        if (index === 8) {
          return { rowSpan: 2 }
        }
        if (index === 10) {
          return { rowSpan: 3 }
        }
        if (
          index == 1 ||
          index == 2 ||
          index == 3 ||
          index == 5 ||
          index == 7 ||
          index == 9 ||
          index == 11 ||
          index == 12
        ) {
          return { rowSpan: 0 }
        }
      }
    },
    {
      title: '范围分类',
      dataIndex: 'type',
      key: 'type'
    },
    {
      title: '实际值',
      dataIndex: 'value',
      key: 'value'
    },
    {
      title: '分值',
      dataIndex: 'score',
      key: 'score'
    }
  ],
  tableData: []
})

const init = (data) => {
  state.tableData = []
  open.value = true
  if (data) {
    if (data) {
      JSON.parse(data).element.forEach((element) => {
        const range = element.range
        range.forEach((cont) => {
          state.tableData.push({
            label: element.label,
            type: cont.type,
            value: cont.value,
            score: cont.score
          })
        })
      })
      state.tableData.push({
        label: '总分',
        type: '',
        value: '',
        score: JSON.parse(data).total
      })
    }

    state.tableData = [...state.tableData]
  }
}

defineExpose({
  init
})
</script>
<style lang="less" scoped></style>
